<template>
    <!--
      1.在el-form标签加类名search-form-inline
      2.label-width="80px"  设置80px
      3.size="small"

      4.区间的搜索 采用了两个input标签  加类名：number-scope
    -->

    <div class="app-container">
        <div class="filter-container">
            <el-form :inline="true" :model="listQuery" class="search-form-inline" label-width="80px" size="small">
                <el-form-item label="终端客户名称">
                    <el-input v-model="listQuery.name"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-cascader
                    v-model="addrValue"
                        :options="options"
                        change-on-select
                        @active-item-change=""
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="下拉框">
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="aa"
                        type="date"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="日期区间">
                    <el-date-picker
                        v-model="bb"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="多选框">
                    <el-select
                        v-model="value11"
                        multiple
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <elFormNumScope label="数字区间" startName="startNum" endName="endNum" :data="formData"></elFormNumScope>

                <el-button type="primary" size="small" @click="search">搜索</el-button>
                <el-form-item label="textArea" class="rows">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入备注"
                        maxlength="200"
                        show-word-limit
                        resize="none"
                        v-model="listQuery.name">
                    </el-input>
                </el-form-item>
                <el-form-item class="rows">
                    <el-button type="primary">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>

                <hr>
                <elUpload ref="upload" :autoUpload="false" :limit=5  :viewer="true" :fileList="fileList"></elUpload>


            </el-form>
        </div>
    </div>


</template>

<script>
    import Pagination from '@/components/Pagination'

    import xForm from '@/components/xForm/xForm'
    import elFormNumScope from '@/components/xForm/elFormNumScope'
    import elUpload from '@/components/xForm/elUpload'


    export default {
        name: 'demoForm',
        components: { Pagination, xForm, elFormNumScope, elUpload },
        data() {
            return {
                formData:{
                    name1:'111',
                    startNum:1,
                    endNum:2,
                },
                addrValue:[],
                listQuery: {
                    name: '111'
                },
                options: [{
                    value: '1',
                    label: '浙江',
                    children: [{
                        value: '2',
                        label: '杭州',
                        children: [{
                            value: '3',
                            label: '西湖'
                        }]
                    }]
                }],
                options2: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶',
                    disabled: true
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value2: '',
                aa:'',
                bb:'',
                value11: [],
                fileList:[
                {name: 'food.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                {name: 'asdas.doc',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.doc?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            }
        },
        methods:{
            search(){
                console.log(this.formData)
                debugger
            }
        }
    }
</script>


